<template>
	<view>
		<u-popup v-model="show" mode="bottom" @close="close">
			<view class="sign_in" v-if="show1">
				<view class="t_img">
					<!-- <image src="/static/home/s_bg.png"></image> -->
					<view class="texts">
						<text>用户登录</text>
						<!-- <text>领福利啦！</text> -->
					</view>
				</view>
				<view class="login">
					<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</button>
					<!-- <button v-else @click="Gobut">一键登录</button> -->
				</view>
			</view>
		</u-popup>
		<u-popup v-model="advertisement" mode="bottom" @close="useclose" :border-radius="40">
			<view class="pup_coneter">
				<view class="heder">
					<image mode="widthFix" src="https://img.js.design/assets/img/675fcc96d0d8a6111d07f040.jpg#c18013bbfa12ea60e9bf83ecc73e2d32"></image>
					<view>艺礼文创 申请</view>
				</view>
				<view class="title">
					 获取您的昵称、头像
				</view>
				<view class="debs">提供具有辨识度的用户中心页面</view>
				<view class="avert">
					<view class="sculpture">
						 <view class="left">
							 头像
						 </view>
						 <view class="us_image">
							<view class="us_image_box">
								<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
										<!-- <image  style="width:80rpx;height: 80rpx;border-radius: 50%;"   :src="userInfo.avatar || '/static/def_avatar.png'" mode=""></image> -->
								</button>
							</view>
						 </view>
					</view>
					<view class="sculpture">
						 <view class="left">
							 昵称
						 </view>
						 <view class="us_image">
							<view class="us_image_box">
								<input type="nickname" placeholder="请输入用户昵称" v-model="nickname" @input="inputs"
								> 
							</view>
						 </view>
					</view>
				</view>
				<view class="wc_btn" @click="subtem">完成</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import { getWxPhone , getQiniuToken , changeUser} from '@/core/api/index.js'
	export default{
		data(){
			return{
				show:true,
				show1:true,
				chexstaut:false,
				advertisement:false,
				nickname:''
			}
		},
		computed:{
			...mapState({
			   openid: state => state.user.openid,
			   userInfo: state => state.user.userInfo
			}),
		},
		mounted() {
			
		},
		methods:{
			async decryptPhoneNumber(e){
				console.log(e,'--' , this.openid)
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					let parmes = {
						openid:this.openid,
						code:e.detail.code
					}
					const { _data } = await getWxPhone(parmes)
					console.log(_data)
					uni.setStorageSync('_access_token', _data.auth.Authorization);
                    uni.setStorageSync('phone', _data.user.reg_phone);
					this.$store.dispatch('user/getUserinfo')
					this.$store.dispatch('user/getQiniuToken')
				    this.advertisement = true
				}
			},
			chooseavatar(e){
				console.log(e.detail.avatarUrl , 'token' , uni.getStorageSync('uploadToken'))
				let key = "userinfo/lxwsh" + new Date().getTime() + Math.random() +".png"; //key为自定义文件名
				uni.uploadFile({
					url: 'https://up-z2.qiniup.com', // 服务器上传接口地址
					filePath: e.detail.avatarUrl,
					name: "file",
				    formData: {
					'token':  uni.getStorageSync('uploadToken'),
					 key
				    },
					success: (uploadFileRes) => {
						console.log('upload success:', uploadFileRes);
						let uplodata = JSON.parse(uploadFileRes.data)
						// this.vimages.push('https://img.shihhl.com/' + uplodata.key)
						this.userInfo.avatar = 'https://img.shihhl.com/' + uplodata.key
						// console.log(this.form.simags,'图片')
					},
					fail: (uploadFileErr) => {
						// console.error('upload fail:', uploadFileErr);
					}
				});
				// uni.uploadFile({
				// 	url: 'https://test.scenefinder.cn/index/index/wxheadsave', //仅为示例，非真实的接口地址
				// 	filePath: e.detail.avatarUrl,
				// 	name: 'file',
				// 	success: uploadFileRes => {
				// 		console.log(JSON.parse(uploadFileRes.data));
				// 		let updata = JSON.parse(uploadFileRes.data)
				// 		this.userInfo.avatar = updata.data.struserhead
				// 	}
				// });
			},
			async subtem(){
				console.log(this.nickName)
				if(!this.userInfo.avatar){
					uni.showToast({
						title:'请上传您的头像',
						icon:'none'
					})
					return
				}
				this.userInfo.nick = this.nickname
				if(!this.userInfo.nick){
					uni.showToast({
						title:'请上输入您的用户名',
						icon:'none'
					})
					return
				}
				let parame = {
					nick:this.userInfo.nick,
					avatar:this.userInfo.avatar,
					phone:this.userInfo.phone,
					age:this.userInfo.age
				}
				console.log(parame)
				const res = await changeUser(parame)
				console.log(res,'00000')
				if(res.code == 0){
					uni.showToast({
						title:'授权成功'
					})
					this.cromf()
					this.close()
				}
			},
			onUnload(){
				if(!uni.getStorageSync('avatar')){
				   uni.removeStorageSync('_access_token')
				}
			},
			useclose(){
				uni.removeStorageSync('_access_token')
			},
			cromf(){
				this.$emit('Login',true)
			},
			checkboxChange(e){
				this.chexstaut = !this.chexstaut
			},
			pevst(){
				uni.navigateTo({
					url:'/pages/home/privacy'
				})
			},
			MuberLogin(){
				uni.navigateTo({
					url:'/pages/register/index'
				})
			},
			close(){
				this.$emit('pupsta',false)
			}
		}
	}
</script>
    
 <style>

 </style>
 <style lang="scss">
	 ::v-deep .u-mode-center-box{
	 	// {
	 		background-color: #0000 !important;
	 	// }
	 }
 </style>
<style lang="scss" scoped>
	.sign_in{
		height: 408rpx;
		padding: 31rpx 0;
		// background: url(https://img.shihhl.com/zhiwu/img/s_login.png) no-repeat;
		background-size: 100% 100%;
		.t_img{
			width: 704.19rpx;
			height: 128.97rpx;
			margin: 0 auto;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.texts{
				font-size: 40rpx;
				top: 42%;
				position: absolute;
				text-align: center;
				letter-spacing: 5rpx;
				width: 100%;
				font-weight: bold;
				& text:nth-child(2){
					color: #ED6D00;
				}
			}
		}
		.login , .number_login{
			margin: 54rpx auto 0;
			width: 640rpx;
			height: 100rpx;
			// background: linear-gradient( 90deg, #FFAF67 0%, #ED6D00 100%);
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			button{
				width: 100%;
				// border:;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				color: #fff;
				font-size: 30rpx;
				height: 100%;
				background: linear-gradient( 90deg, #FFAF67 0%, #ED6D00 100%);
			}
		}
		.number_login{
			background: #E3D6CD;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			margin:31rpx  auto;
			color: #8D8D8D;
			image{
				width: 27.75rpx;
				height: 35.36rpx;
				margin-right: 13rpx;
			}
		}
		.che_box{
		    width: 640rpx;
			margin: 58rpx auto;
			display: flex;
			align-items: center;
			// u-checkbox{
				& text:nth-child(2){
					color: #545454;
				}
				text{
					color: #ED6D00;
					font-size: 24rpx;
				}
			// }
		}
	}
	.poup{
		width: 100%;
		height: 100%;
		background-color: #00000054;
		position: fixed;
		z-index: 99999;
		top: 0%;
	}
	.pup_coneter{
		padding:25rpx 40rpx;
		width: 100%;
		.heder{
			font-size: 28rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			image{
				width: 90rpx;
				// height: 80rpx;
				border-radius: 50%;
			}
		}
		.title{
			margin: 30rpx 0 10rpx;
			// width: 252.89rpx;
			// height: 48rpx;
			font-size: 28rpx;
			font-weight: 600;
			// margin-bottom: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.debs{
			color: #878787;
			border-bottom: 1rpx solid #f5f5f5;
			padding-bottom: 25rpx;
			font-size: 24rpx;
		}
		button{
		 	border: none;
			background: #fff;
			width: 100%;
			text-align: left;
			padding: 0;
			    display: flex;
			    align-items: center;
			// height: 150rpx;
		}
		button::after{
			border: none;
		}
		.wc_btn{
			width: 360rpx;
			height: 70rpx;
			background-color: #4caf50;
			color: #fff;
			font-size: 28rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			text-align: center;
			margin: 40rpx auto 20rpx;
		}
		.sculpture{
			// padding: 0 70rpx 0rpx;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.us_image{
				// width: 120rpx;
				display: flex;
				align-items: center;
				height: 100rpx;
				border-radius: 50%;
				    flex: 1;
				    justify-content: flex-end;
				.us_image_box {
					display: flex;
					padding-left: 80rpx;
					align-items: center;
					height: 100%;
					// justify-content: inherit;
					width: 100%;
					button{
						height: 100%;
					}
					input{
						// text-align: right;
						width: 100%;
					}
				}
				
			}
		}
		.tex1{
			font-size: 41rpx;
			color: #000000;
		}
		.tex2{
			font-size: 40rpx;
			margin-top: 5rpx;
			color: #000000;
			text{
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 80rpx;
				color: #ED6D00;
				margin-right: 2rpx;
			}
		}
		.btn{
			width: 290rpx;
			margin-top: 26rpx;
			height: 90rpx;
			background: url(https://img.shihhl.com/zhiwu/img/bt_1.png) no-repeat;
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}
	}
	.colone{
		position: fixed;
		background-color: #4e4d4d;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 9.5%;
		top: 25%;
		width: 57rpx;
		height: 57rpx;
	}
</style>